<template>
	<view>
		<!-- 列表三 -->
		<block v-if="list.length === 0">
			<view class="flex align-center justify-center text-light-muted" style="height: 200rpx;">暂无数据...</view>
		</block>
		<block v-else>
			<card title="为你推荐" :showTitle="false" :showRefresh="false">
				<view style="padding: 0 15rpx;">
					<view v-for="(item,index) in list" :key="index" class="flex border-bottom py-2 px-1 align-center"
					@tap="open(item.id)">
						<image :src="item.cover+'/small'" mode="aspectFill" class="rounded-lg mx-2 flex-shrink"
							style="width: 250rpx; height: 160rpx;"></image>
						<view class="flex-1">
							<view class="text-ellipsis-2 font mb-1 pr-1">{{item.title}}</view>
							<view class="font-sm text-light-muted mb-1">{{$Time.gettime(item.created_time)}}</view>
							<view class="flex text-light-muted mb-1 justify-between align-center">
								<view class="flex align-center">
									<text class="iconfont iconbofangshu font-md mr-1"></text>
									<text class="font-sm">{{$Time.getDuration(item.duration)}}</text>
									<text class="iconfont icondanmushu font-md mx-1"></text>
									<text class="font-sm">{{$Time.getCounts(item.play_count)}}</text>
								</view>
								<text class="iconfont icongengduo"></text>
							</view>
						</view>
					</view>
				</view>
			</card>
			<!-- 上拉加载更多 -->
			<view class="flex align-center justify-center font text-secondary" 
			style="height: 50px;" hover-class="bg-light">{{nomore?'我是有底线的':'上滑加载更多'}}</view>
		</block>
	</view>
</template>

<script>
	import card from '@/components/common/card.vue';
	// import TH from '@/common/time.js';

	export default {
		components: {
			card
		},
		data() {
			return {
				catogery_id:0,
				title:'',
				page:1,
				list:[],
				nomore:false,
				loading:false,
			}
		},
		onLoad(e) {
			if(e.id){
				this.catogery_id = parseInt(e.id);
			}
			if(e.title){
				uni.setNavigationBarTitle({
					title:e.title+'作品列表'
				})
			}
			this.getData(false);
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.nomore = false;
			this.getData().finally(()=> {
				uni.stopPullDownRefresh();
			});
		},
		// 触底加载更多
		onReachBottom() {
			if(!this.nomore){
				this.page++;
				this.getData();
			}
		},
		methods: {
			open(id){
				uni.navigateTo({
					url:'../video-detail/video-detail?id='+id
				})
			},
			getData(showToast=true){
				uni.showLoading();
				this.loading = true;
				let url = `/category/${this.catogery_id}/video/${this.page}`;
				return this.$H.get(url).then(res=>{
					//console.log(res);
					if(res.length < 10){
						this.nomore = true
					}
					// 需要将所有cover，加上服务器地址
					res.forEach(item=>{
						item.cover = this.$H.common.sourceUrl + item.cover; 
					})
					// page>1 代表是
					if(showToast){
						uni.showToast({
							title:'数据刷新成功',
							icon:'none'
						});
						this.loading = false;
					}
					if(this.page > 1){
						if(res.length > 0){
							this.list = [...this.list, ...res];
						} else {
							this.page--;
							if(showToast){
								uni.showToast({
									title:'没有更多数据了',
									icon:'none'
								});
								this.loading = false;
							}
						}
					} else {
						this.list = res;
					}
				}).catch(err=>{
					if(this.page > 1){
						this.page--;
					}
				}).finally(()=> {
					if(this.loading){
						uni.hideLoading();
					}
				});
			}
		}
	}
</script>

<style>

</style>
